<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    }
});

const emits = defineEmits(['update:visible']);

const closeModal = () => {
    emits('update:visible', false);
};
</script>
<template>
    <view v-if="visible" class="modal-overlay" @click="closeModal">
        <view class="modal-content" @click.stop>
            <slot>
                插槽内容
            </slot>
            <view class=""></view>
        </view>
    </view>
</template>
<style scoped lang="scss">
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    width: 100%;
    max-width: 1000rpx;
}
</style>
